<template>
	<view class="container">
        <!-- <image :src="data" class="bg" mode="aspectFill"></image> -->
		<image src="/static/del/22.jpg" class="bg" mode="aspectFill"></image>
        
        <view class="wrapper">
            <view class="btns">
                <view class="btns-left" @click="doDownload">
					<image src="../../static/icon/dl.png" class="s-icon-05"></image>
                    <view>保存</view>
                </view>
                <button open-type="share" class="share-button">
                	<image src="../../static/icon/share_3.png" class="s-icon-05"></image>
                	<view>分享</view>
                </button>
            </view>
        </view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
                background: {
                	backgroundColor: 'rgba(255,255,255,0)'
                },
                statusBar: 0,
                data: '', //海报
                isShow: false,
				site: {},
			}
		},
		onShareAppMessage(res) {
			return {
		        title: this.site.name,
				imageUrl: this.data,
		        path: '/pages/tabbar/index?parentID=' + _this.$getSync('userId')
			}
		},
		onShareTimeline(){
		    return {
		        title: this.site.name,
		        path: '/pages/tabbar/index?parentID=' + _this.$getSync('userId')
		    }
		},
		onLoad(option) {
		    let _this = this;
		    //状态栏高度
		    uni.getSystemInfo({
		    	success: function(res) {
		    		_this.statusBar = res.statusBarHeight;
		    	}
		    });
			
			this.getSite()
            // this.getPost()
		},
		methods: {
            // 保存
            doDownload() {
            	var _this = this;
            	uni.downloadFile({
            		url: _this.data,
            		success: (res) => {
                        // console.log(res)
            			if (res.statusCode == 200) {
            				uni.saveImageToPhotosAlbum({ 
            					filePath: res.tempFilePath,
            					success: (res) => {
            						_this.$toast('保存成功');
            					},
            					fail: (err) => {
            						_this.$toast('保存失败');
            					}
            				});
            			} else if (res.cancel) {
                            
            			}
            		}
            	});
            },
            // 获取海报
            getPost(){
            	this.$ajax('extension', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.data = ret.data;
                        this.isShow = true;
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			// 获取站点信息
			getSite() {
				this.$ajax('login/getConfig', {
					
				}).then(ret => {
					if (ret.status == 0) {
			            this.site = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
            
			onPageScroll: function(e) {
				//nvue暂不支持滚动监听，可用bindingx代替
				// console.log("滚动距离为：" + e.scrollTop);
				let a = e.scrollTop * 0.05;
				if (a > 1) {
					a = 1;
				}
				if (e.scrollTop == 0) {
					this.background.backgroundColor = 'rgba(226,51,18,0)';
				} else {
					this.background.backgroundColor = 'rgba(226,51,18,' + a + ')';
				}
			},
		}
	}
</script>

<style lang="scss">
    
	page{
	    background-color: #fff;
	}
    
	.bg{
	    width: 100%;
        height: 100vh;
	}
    .wrapper{
        width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 40rpx;
		left: 0;
		z-index: 10;
    }
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        color: #fff;
    }
    .btns>view{
        width: calc(85vw / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25rpx 0;
        border-radius: 15rpx;
    }
    .s-icon-05{
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
    }
    .btns-left{
        background: #f76d0a;
		margin-right: 20rpx;
    }
    .btns-right{
        background: #2558ab;
    }
    
    .share-button {
        width: calc(85vw / 2);
        padding: 6rpx 0;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-size: 30rpx;
        background: #2558ab !important;
    	color: #fff;
    
    	&:after {
    		border: none;
    	}
    }
    
	
</style>
